<template>
  <fragment>
    <el-input
      :placeholder="tip"
      clearable
      @clear="handleClear"
      v-model="qmodel"
      :style="{'width': width+'px'}"
      maxlength="4"
      @keyup.native="onKeyup">
      <i slot="prefix" style="line-height: 26px;"><SvgIcon :svgName="iconName" :width="'16px'" :height="'16px'"  /></i>
    </el-input>
  </fragment>
</template>

<script>
import SvgIcon from '@/components/SvgIcon';

export default {
  name: 'TimeInp',
  components: { SvgIcon },
  props: {
    // 下标
    pindex: {
      type: String,
      default: '0'
    },
    // 参数名称
    name: {
      type: String,
      default: 'time'
    },
    // 默认值
    defval: {
      type: String,
      default: ''
    },
    // 输入框内提示文本
    tip: {
      type: String,
      default: '请输入时间'
    },
    // 输入框宽度
    width: {
      type: Number,
      default: 110
    },
    // 图标名称
    iconName: {
      type: String,
      default: 'stime'
    }
  },
  data() {
    return {
      // 双向绑定的值
      qmodel: this.defval,
    }
  },
  watch: {
    // 监控父级传入的默认值变化，更新至组件上
    defval: {
      handler(cval, oval){
        this.qmodel = cval;
      }
    },
  },
  methods: {
    // 按键输入事件
    onKeyup(){
      let that = this, val = that.qmodel, res = '';

      if(val){
        val.replace(/[^\d]/g, '');

        if(val.length >= 4){
          if(val.indexOf(':') != -1) {
            res = val.slice(0, 5);
          }else{
            val = val.slice(0, 4);

            res = `${val.slice(0, 2)}:${val.slice(2)}`;
          }
        }else{
          res = val;
        }
      }

      that.$emit('pclick', {pindex: that.pindex, name: that.name, val: res});
    },
    // 清空输入框值
    handleClear(){
      const that = this;
      that.$emit('pclick', {pindex: that.pindex, name: that.name, val: ''});
    },
  }
}
</script>

<style lang="less" scoped>
// .time-inp ::v-deep{
  
// }
</style>
